<template>
	<div id="page1">
		<!--轮播图-->
		<div class="block">
			<el-carousel trigger="click"  arrow="never" :interval="4000" @change="change()">
				<el-carousel-item v-for="item in images" :key="item.id">
					<img :src="item.pic" class="lunbo" />
				</el-carousel-item>
			</el-carousel>
		</div>

		<div id="wai1">
			<div class="divleft1">
				<!--左侧毛玻璃-->
				<div class="leftglass">
					<div class="leftfont">
						<div class="s21font">
							<p class="details21">S21</p>

							<div class="s21rightfont">
								<div class="s21righttopfontbigfont">
									<p class="rightbigfont">The new area of madical technology</p>
								</div>
								<div class="s21rightbottomsmallfont">
									<p>To be quite frank,
									elements od the software engineering concepts and practices can be regared as
										remotely insignificant.
										The sources and influences ,elements od the software engineering concepts and
										practices can be regared as remotely insignificant.
										The sources and influences
									</p>
								</div>
							</div>

						</div>

					</div>
				</div>
			</div>
			<div class="divright1">

				<!--第一个方框-->
				<div id="wai">
					<div class="divleft">
						<!--11-->	
						<div class="allinneed">
							<p class="reqacticve">设备已启动</p>
							<p class="isactiverequ">已加载S21CTX设备</p>
							<div class="reqnormal">
								<p>数据加载正常</p>
								<p>视频信息正常</p>
								<p>设备脚踏升降正常</p>
								<p>设备放平正常</p>
								<p>设备摆正正常</p>
								<p>设备移动正常</p>
								<p>设备旋转正常</p>
								<p>设备启停正常</p>
								<p>设备扫描正常</p>
							</div>
							<div class="repcheck">
								<p>设备初始化检测正常，可以正常启动</p>
							</div>
						</div>
					</div>
					
					<div class="openClose">
						<el-switch
						class="111"
						  v-model="value"
						  active-value="打开"
						  inactive-value="关闭"
						  active-color="#0094da"
						  @change="handChange">
						</el-switch>&nbsp;
						<span style="color: #eee; vertical-align: middle;">{{ocvalue}}</span>
					</div>

					<div class="divright">
						<!--progress="50"处理进度-->
						<!--emptyThickness="5%"  外圈边框-->
						<!--line-mode="in 5" 距外边框的距离-->
						<!--内边框thickness粗细-->
						<!-- 进度上的点dot="10 #00f6df"-->
						
						<vue-ellipse-progress :data="circles" :progress="progress" progress="80" :angle="-90"
							:color="gradient" :colorFill="colorFillGradient" emptyColor="#c6e5f8"
							:emptyColorFill="emptyColorFillGradient" :size="190" :thickness="20" emptyThickness="2%"
							line-mode="in 10" :legend="true" :legendValue="100"
							:legendFormatter="({currentValue}) => new Intl.NumberFormat('de-DE').format(currentValue)"
							legendClass="legend-custom-style" animation="reverse 700 400" :noData="false"
							:loading="false" fontColor="#eeeeee" :half="false" :gap="10" reverse fontSize="2rem">
							<span slot="legend-value" style="color: #eeeeee;">%</span>
							<p slot="legend-caption" style="color:#eeeeee;">初始化检测</p>
						</vue-ellipse-progress>

					</div>
					
					<div class="startTreatment">
						<button class="startTreatmentInfo">开始治疗</button>
					</div>
					
				</div>
				<!--第二个方框-->
				<div class="secborder">
					<div>

						<div class="allsecrightborder">
							<div class="secrightborder">
								<p class="todayorder">今日排程</p>
								<div>
									<span class="needadd">如需添加可直接选择</span>
									<span class="fileinput">文件导入...</span>
								</div>
							</div>
							<div class="secrightbordertime">
								<span>2021/12/2 星期二 09:53</span>
							</div>
						</div>
						<div>
							<div class="secfontnumber">
								<div class="iscurenumber">
								<span>已治疗</span>
								<span class="curenumber">12</span>
								<span class="linepie">/</span>
								</div>
							
									<div class="countallnumber">
									<p class="numberfs">56</p>
									<p class="mornall">上午总人数</p>
								
								</div>
							</div>
						</div>
						<div class="secbody">
								<span>头部</span>
								<span class="bodyheadnum1">Ⅰ</span>
								<span class="peo">6人</span>
								<span class="bodyheadnum2">Ⅱ</span>
								<span  class="peo">12人</span>
								<span class="bodyheadnum3">Ⅲ</span>
								<span  class="peo">24人</span>
								<span class="bodyheadnum4">Ⅳ</span>
								<span  class="peo">0人</span>							
						</div>
						<div class="secbody">
								<span>颈椎</span>
								<span class="bodyheadnum1">Ⅰ</span>
								<span class="peo">6人</span>
								<span class="bodyheadnum2">Ⅱ</span>
								<span  class="peo">12人</span>
								<span class="bodyheadnum3">Ⅲ</span>
								<span  class="peo">24人</span>
								<span class="bodyheadnum4">Ⅳ</span>
								<span  class="peo">0人</span>							
						</div>
						<div class="secbody">
								<span>躯体</span>
								<span class="bodyheadnum1">Ⅰ</span>
								<span class="peo">6人</span>
								<span class="bodyheadnum2">Ⅱ</span>
								<span  class="peo">12人</span>
								<span class="bodyheadnum3">Ⅲ</span>
								<span  class="peo">24人</span>
								<span class="bodyheadnum4">Ⅳ</span>
								<span  class="peo">0人</span>							
						</div>
						<div class="secbody">
								<span>腿部</span>
								<span class="bodyheadnum1">Ⅰ</span>
								<span class="peo">6人</span>
								<span class="bodyheadnum2">Ⅱ</span>
								<span  class="peo">12人</span>
								<span class="bodyheadnum3">Ⅲ</span>
								<span  class="peo">24人</span>
								<span class="bodyheadnum4">Ⅳ</span>
								<span  class="peo">0人</span>							
						</div>
						<div class="sysbest">
							<span>系统按最佳排序，上午排序表，如需改动请点击</span>
							<button class="moreinfo">更多信息</button>
						</div>
					</div>
				</div>




			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'page1',
		data() {

			return {
	
				// itemsdata: [{
				// 	progress: 100, // required for each circle
				// 	color: "#c7e6f9", // will overwrite global progress color 
				// 	dot: ""
				// }],
				images: [{
						id: 1,
						pic: require("../assets/images/bg_01.jpg"),
					},
					{
						id: 2,
						pic: require("../assets/images/bg_02.png"),
					}
				],
				form: {
					delivery: false
				},
				gradient: {
					radial: false,
					colors: [{
							color: '#00f3e0',
							offset: "0",
							opacity: '1',
						},
						{
							color: '#0067f6',
							offset: "80",
							opacity: '0.8',
						}
					]
				},
				value: "关闭",
				ocvalue:"关闭",

			}
		},
		methods: {
			//切换轮播图触发的事件
			change: function(event) {

			},
			handChange:function(event){
				console.log(event);
				this.ocvalue=event;
			},
			
			
			// circles:function(){
				
			// },
			// progress:function(){
				
			// },
			// colorFillGradient:function(){
				
			// },
			// emptyColorFillGradient:function(){
				
			// }
		},
	}
</script>

<style scoped>
	@import url("../assets/css/Page1.css");
</style>
